<template>
  <div class="config-distribution" v-loading="loading">
    <el-form :model="formData" label-width="120px" ref="formRef">
      <div class="wx-title">分销配置</div>
      <el-form-item
        prop="status"
        label="是否开启分销"
        :rules="[
          { required: true, message: '是否开启分销', trigger: 'change' },
        ]"
      >
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="type"
        label="分销佣金类型"
        :rules="[
          { required: true, message: '分销佣金类型', trigger: 'change' },
        ]"
      >
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">按比例</el-radio>
          <el-radio :label="2">按金额</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="level"
        label="分销层级"
        :rules="[{ required: true, message: '分销层级', trigger: 'change' }]"
      >
        <el-radio-group v-model="formData.level">
          <el-radio :label="1">一级</el-radio>
          <el-radio :label="2">二级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="分销佣金"
        :rules="[{ required: true, message: '一级佣金', trigger: 'change' }]"
      >
        <el-input
          style="width: 200px"
          v-model="formData.fstLevel"
          placeholder="一级佣金"
        />
      </el-form-item>
      <el-form-item
        :rules="[{ required: true, message: '二级佣金', trigger: 'change' }]"
      >
        <el-input
          style="width: 200px"
          v-model="formData.sndLevel"
          placeholder="二级佣金"
        />
      </el-form-item>

      <el-form-item
        prop="moneyLimit"
        label="返佣上限"
        :rules="[{ required: true, message: '返佣上限', trigger: 'change' }]"
      >
        <el-input
          style="width: 200px"
          v-model="formData.moneyLimit"
          placeholder="返佣上限"
        />
        <span style="margin-left: 10px">天（订单金额上限）</span>
      </el-form-item>

      <el-form-item
        prop="period"
        label="返佣期限"
        :rules="[{ required: true, message: '返佣期限', trigger: 'change' }]"
      >
        <el-input
          style="width: 200px"
          v-model="formData.period"
          placeholder="返佣期限"
        />
        <span style="margin-left: 10px">天</span>
      </el-form-item>

      <el-form-item
        prop="transfer"
        label="提现金额"
        :rules="[{ required: true, message: '提现金额', trigger: 'change' }]"
      >
        <el-input
          style="width: 200px"
          v-model="formData.transfer"
          placeholder="提现金额"
        />
        <span style="margin-left: 10px">元（满*可以提现）</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { listApi, stateApi } from "@/plugins/api/shopping/distribution";
let loading = ref(false);
function getData() {
  loading.value = true;
  listApi()
    .then((data) => {
      formData.value = { ...data };
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
let formData = ref({});
let formRef = ref(null);
function submit() {
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      stateApi(formData.value)
        .then(() => {
          ElMessage.success("提交成功！");
          getData();
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.config-distribution {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;

  .wx-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
  }
}
</style>
